<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>专题列表 - 职场社交</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #eff6ff;
            --primary-dark: #1d4ed8;
            --secondary: #64748b;
            --dark: #1e293b;
            --light: #f8fafc;
            --border: #e2e8f0;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            padding: 0.75rem 0;
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .nav-link {
            color: var(--dark);
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        .user-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid transparent;
            transition: border-color 0.2s;
        }
        
        .user-avatar:hover {
            border-color: var(--primary);
        }
        
        /* 主容器样式 */
        .main-container {
            padding: 2rem 0;
        }
        
        .page-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .page-description {
            color: var(--secondary);
            margin-bottom: 1.5rem;
        }
        
        /* 筛选区域样式 */
        .filters-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-section:last-child {
            margin-bottom: 0;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-title i {
            color: var(--primary);
        }
        
        .search-box {
            position: relative;
            margin-bottom: 1rem;
        }
        
        .search-input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 0.95rem;
            transition: all 0.2s;
        }
        
        .search-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary);
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        
        .filter-tag {
            background-color: var(--light);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 0.35rem 1rem;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .filter-tag:hover {
            background-color: var(--primary-light);
            border-color: var(--primary-light);
        }
        
        .filter-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .range-slider {
            width: 100%;
            margin: 1rem 0;
        }
        
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .custom-select {
            width: 100%;
            padding: 0.6rem 1rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            background-color: white;
            font-size: 0.95rem;
            transition: all 0.2s;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 16px;
        }
        
        .custom-select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }
        
        .filter-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border);
        }
        
        .reset-btn {
            background: none;
            border: none;
            color: var(--secondary);
            font-size: 0.95rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            transition: color 0.2s;
        }
        
        .reset-btn:hover {
            color: var(--danger);
        }
        
        .apply-btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.6rem 1.5rem;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .apply-btn:hover {
            background-color: var(--primary-dark);
        }
        
        /* 专题列表样式 */
        .topics-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .topics-count {
            color: var(--secondary);
            font-size: 0.95rem;
        }
        
        .sort-controls {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .sort-label {
            font-size: 0.95rem;
            color: var(--secondary);
        }
        
        .sort-select {
            padding: 0.4rem 0.75rem;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 0.9rem;
        }
        
        .topic-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            margin-bottom: 1.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .topic-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
        }
        
        .topic-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        .topic-content {
            padding: 1.25rem;
        }
        
        .topic-category {
            display: inline-block;
            background-color: var(--primary-light);
            color: var(--primary);
            font-size: 0.8rem;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            margin-bottom: 0.75rem;
        }
        
        .topic-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            transition: color 0.2s;
            text-decoration: none;
            color: var(--dark);
        }
        
        .topic-title:hover {
            color: var(--primary);
        }
        
        .topic-description {
            color: var(--secondary);
            font-size: 0.95rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .topic-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--secondary);
        }
        
        .topic-author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .author-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .topic-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        /* 分页样式 */
        .pagination-container {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid var(--border);
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .page-btn:hover:not(.active):not(.disabled) {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        .page-btn.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* 移动端适配 */
        @media (max-width: 768px) {
            .filter-actions {
                flex-direction: column;
                gap: 1rem;
                align-items: stretch;
            }
            
            .reset-btn, .apply-btn {
                width: 100%;
                justify-content: center;
                padding: 0.75rem;
            }
            
            .topics-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .topic-image {
                height: 140px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-comments"></i>
                职场社交
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto gap-4">
                    <li class="nav-item"><a href="#" class="nav-link">首页</a></li>
                    <li class="nav-item"><a href="#" class="nav-link active">专题</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">问答</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">资讯</a></li>
                    <li class="nav-item"><a href="#" class="nav-link">人脉</a></li>
                    <li class="nav-item">
                        <a href="#" class="nav-link" title="个人中心">
                            <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="user-avatar">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container main-container">
        <h1 class="page-title">专题列表</h1>
        <p class="page-description">探索热门专题，参与讨论，拓展你的职场视野</p>
        
        <div class="row">
            <!-- 筛选侧边栏 -->
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="filters-container sticky-top" style="top: 20px;">
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-search"></i> 搜索专题
                        </h3>
                        <div class="search-box">
                            <i class="fas fa-search search-icon"></i>
                            <input type="text" class="search-input" placeholder="输入关键词搜索专题...">
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-th-large"></i> 专题分类
                        </h3>
                        <div class="filter-tags">
                            <div class="filter-tag active">全部</div>
                            <div class="filter-tag">职场技能</div>
                            <div class="filter-tag">行业动态</div>
                            <div class="filter-tag">职业规划</div>
                            <div class="filter-tag">面试经验</div>
                            <div class="filter-tag">薪资行情</div>
                            <div class="filter-tag">创业交流</div>
                            <div class="filter-tag">人脉拓展</div>
                            <div class="filter-tag">职场感悟</div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-fire"></i> 热门程度
                        </h3>
                        <div class="filter-tags">
                            <div class="filter-tag active">不限</div>
                            <div class="filter-tag">热门</div>
                            <div class="filter-tag">最新</div>
                            <div class="filter-tag">最多讨论</div>
                            <div class="filter-tag">最多收藏</div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-calendar-alt"></i> 发布时间
                        </h3>
                        <div class="filter-tags">
                            <div class="filter-tag active">不限</div>
                            <div class="filter-tag">今天</div>
                            <div class="filter-tag">本周</div>
                            <div class="filter-tag">本月</div>
                            <div class="filter-tag">近3个月</div>
                            <div class="filter-tag">今年</div>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-users"></i> 参与人数
                        </h3>
                        <input type="range" min="0" max="10000" value="5000" class="range-slider" id="participantsRange">
                        <div class="range-labels">
                            <span>0人</span>
                            <span id="participantsValue">5000+人</span>
                        </div>
                    </div>
                    
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-building"></i> 相关行业
                        </h3>
                        <select class="custom-select">
                            <option value="">全部行业</option>
                            <option value="it">互联网/IT</option>
                            <option value="finance">金融/银行</option>
                            <option value="education">教育/培训</option>
                            <option value="medical">医疗/健康</option>
                            <option value="manufacturing">制造业</option>
                            <option value="retail">零售/电商</option>
                            <option value="service">服务业</option>
                        </select>
                    </div>
                    
                    <div class="filter-actions">
                        <button class="reset-btn">
                            <i class="fas fa-redo-alt"></i> 重置筛选
                        </button>
                        <button class="apply-btn">应用筛选</button>
                    </div>
                </div>
            </div>
            
            <!-- 专题列表 -->
            <div class="col-lg-9 col-md-8">
                <div class="topics-header">
                    <div class="topics-count">找到 128 个专题</div>
                    <div class="sort-controls">
                        <span class="sort-label">排序方式：</span>
                        <select class="sort-select">
                            <option value="recommended">推荐</option>
                            <option value="latest">最新发布</option>
                            <option value="popular">热门程度</option>
                            <option value="comments">评论最多</option>
                        </select>
                    </div>
                </div>
                
                <!-- 专题卡片列表 -->
                <div class="row">
                    <!-- 专题1 -->
                    <div class="col-lg-6 col-md-6">
                        <div class="topic-card">
                            <img src="https://picsum.photos/600/400?random=10" alt="2023年互联网行业发展趋势分析" class="topic-image">
                            <div class="topic-content">
                                <span class="topic-category">行业动态</span>
                                <a href="#" class="topic-title">2023年互联网行业发展趋势分析</a>
                                <p class="topic-description">深入分析2023年互联网行业的发展趋势，探讨人工智能、大数据、云计算等技术对行业的影响，以及未来职业发展方向。</p>
                                <div class="topic-meta">
                                    <div class="topic-author">
                                        <img src="https://picsum.photos/100/100?random=1" alt="张明" class="author-avatar">
                                        <span>张明</span>
                                    </div>
                                    <div class="topic-stats">
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>328</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-heart"></i>
                                            <span>1.2k</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>8.5k</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 专题2 -->
                    <div class="col-lg-6 col-md-6">
                        <div class="topic-card">
                            <img src="https://picsum.photos/600/400?random=11" alt="程序员面试经验分享" class="topic-image">
                            <div class="topic-content">
                                <span class="topic-category">面试经验</span>
                                <a href="#" class="topic-title">大厂程序员面试经验与技巧分享</a>
                                <p class="topic-description">多位拿到BAT、字节跳动等大厂Offer的程序员分享他们的面试经验，包括算法题、系统设计、项目经验等方面的准备方法。</p>
                                <div class="topic-meta">
                                    <div class="topic-author">
                                        <img src="https://picsum.photos/100/100?random=2" alt="李华" class="author-avatar">
                                        <span>李华</span>
                                    </div>
                                    <div class="topic-stats">
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>562</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-heart"></i>
                                            <span>2.8k</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>15.3k</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 专题3 -->
                    <div class="col-lg-6 col-md-6">
                        <div class="topic-card">
                            <img src="https://picsum.photos/600/400?random=12" alt="35岁职场危机应对策略" class="topic-image">
                            <div class="topic-content">
                                <span class="topic-category">职业规划</span>
                                <a href="#" class="topic-title">35岁职场危机：如何提前规划与应对</a>
                                <p class="topic-description">探讨职场中所谓的"35岁危机"现象，分析其产生原因，并提供切实可行的应对策略和职业转型建议。</p>
                                <div class="topic-meta">
                                    <div class="topic-author">
                                        <img src="https://picsum.photos/100/100?random=3" alt="王强" class="author-avatar">
                                        <span>王强</span>
                                    </div>
                                    <div class="topic-stats">
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>783</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-heart"></i>
                                            <span>3.5k</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>21.7k</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 专题4 -->
                    <div class="col-lg-6 col-md-6">
                        <div class="topic-card">
                            <img src="https://picsum.photos/600/400?random=13" alt="远程工作效率提升技巧" class="topic-image">
                            <div class="topic-content">
                                <span class="topic-category">职场技能</span>
                                <a href="#" class="topic-title">远程工作效率提升：工具与方法分享</a>
                                <p class="topic-description">随着远程办公的普及，如何保持高效工作成为挑战。本文分享实用的远程工作工具和时间管理方法，帮助你提升工作效率。</p>
                                <div class="topic-meta">
                                    <div class="topic-author">
                                        <img src="https://picsum.photos/100/100?random=4" alt="赵静" class="author-avatar">
                                        <span>赵静</span>
                                    </div>
                                    <div class="topic-stats">
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>245</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-heart"></i>
                                            <span>986</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>6.2k</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 专题5 -->
                    <div class="col-lg-6 col-md-6">
                        <div class="topic-card">
                            <img src="https://picsum.photos/600/400?random=14" alt="2023年各行业薪资报告" class="topic-image">
                            <div class="topic-content">
                                <span class="topic-category">薪资行情</span>
                                <a href="#" class="topic-title">2023年各行业薪资报告与分析</a>
                                <p class="topic-description">基于大量数据的2023年各行业薪资报告，包括不同职位、不同工作年限的薪资水平，以及未来薪资发展趋势预测。</p>
                                <div class="topic-meta">
                                    <div class="topic-author">
                                        <img src="https://picsum.photos/100/100?random=5" alt="陈明" class="author-avatar">
                                        <span>陈明</span>
                                    </div>
                                    <div class="topic-stats">
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>412</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-heart"></i>
                                            <span>1.8k</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>12.5k</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 专题6 -->
                    <div class="col-lg-6 col-md-6">
                        <div class="topic-card">
                            <img src="https://picsum.photos/600/400?random=15" alt="职场人脉拓展技巧" class="topic-image">
                            <div class="topic-content">
                                <span class="topic-category">人脉拓展</span>
                                <a href="#" class="topic-title">职场人脉拓展：有效社交的艺术</a>
                                <p class="topic-description">分享职场人脉拓展的实用技巧，如何建立有价值的职业关系，以及如何维护和利用你的人脉资源实现职业发展。</p>
                                <div class="topic-meta">
                                    <div class="topic-author">
                                        <img src="https://picsum.photos/100/100?random=6" alt="林小" class="author-avatar">
                                        <span>林小</span>
                                    </div>
                                    <div class="topic-stats">
                                        <div class="stat-item">
                                            <i class="far fa-comment"></i>
                                            <span>189</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-heart"></i>
                                            <span>756</span>
                                        </div>
                                        <div class="stat-item">
                                            <i class="far fa-eye"></i>
                                            <span>5.3k</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页控件 -->
                <div class="pagination-container">
                    <div class="pagination">
                        <button class="page-btn disabled">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button class="page-btn active">1</button>
                        <button class="page-btn">2</button>
                        <button class="page-btn">3</button>
                        <button class="page-btn">4</button>
                        <button class="page-btn">5</button>
                        <button class="page-btn">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 参与人数滑块交互
        const rangeInput = document.getElementById('participantsRange');
        const rangeValue = document.getElementById('participantsValue');
        
        rangeInput.addEventListener('input', function() {
            rangeValue.textContent = this.value + '+人';
        });
        
        // 筛选标签交互
        const filterTags = document.querySelectorAll('.filter-tag');
        filterTags.forEach(tag => {
            tag.addEventListener('click', function() {
                // 如果是"全部"或"不限"标签，取消同组其他标签的选中状态
                const isAllTag = this.textContent === '全部' || this.textContent === '不限';
                const parentTags = this.parentElement.querySelectorAll('.filter-tag');
                
                if (isAllTag) {
                    parentTags.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                } else {
                    // 检查同组中是否有"全部"或"不限"标签并取消其选中状态
                    parentTags.forEach(t => {
                        if (t.textContent === '全部' || t.textContent === '不限') {
                            t.classList.remove('active');
                        }
                    });
                    
                    // 切换当前标签状态
                    this.classList.toggle('active');
                    
                    // 如果同组没有选中的标签，选中"全部"或"不限"标签
                    const activeTags = this.parentElement.querySelectorAll('.filter-tag.active');
                    if (activeTags.length === 0) {
                        parentTags.forEach(t => {
                            if (t.textContent === '全部' || t.textContent === '不限') {
                                t.classList.add('active');
                            }
                        });
                    }
                }
            });
        });
        
        // 重置筛选按钮
        const resetBtn = document.querySelector('.reset-btn');
        resetBtn.addEventListener('click', function() {
            // 重置所有筛选标签
            document.querySelectorAll('.filter-tag').forEach(tag => {
                if (tag.textContent === '全部' || tag.textContent === '不限') {
                    tag.classList.add('active');
                } else {
                    tag.classList.remove('active');
                }
            });
            
            // 重置搜索框
            document.querySelector('.search-input').value = '';
            
            // 重置滑块
            rangeInput.value = 5000;
            rangeValue.textContent = '5000+人';
            
            // 重置下拉选择框
            document.querySelectorAll('.custom-select').forEach(select => {
                select.selectedIndex = 0;
            });
            
            // 重置排序
            document.querySelector('.sort-select').selectedIndex = 0;
        });
        
        // 应用筛选按钮
        const applyBtn = document.querySelector('.apply-btn');
        applyBtn.addEventListener('click', function() {
            // 收集筛选条件（实际应用中会发送到服务器）
            const selectedCategories = Array.from(document.querySelectorAll('.filter-section:nth-child(2) .filter-tag.active'))
                .map(tag => tag.textContent);
                
            const selectedPopularity = Array.from(document.querySelectorAll('.filter-section:nth-child(3) .filter-tag.active'))
                .map(tag => tag.textContent);
                
            const selectedTime = Array.from(document.querySelectorAll('.filter-section:nth-child(4) .filter-tag.active'))
                .map(tag => tag.textContent);
                
            const participants = rangeInput.value;
            const industry = document.querySelector('.custom-select').value;
            const searchTerm = document.querySelector('.search-input').value;
            
            // 在实际应用中，这里会根据筛选条件加载新的专题列表
            console.log('应用筛选条件:', {
                categories: selectedCategories,
                popularity: selectedPopularity,
                time: selectedTime,
                participants: participants,
                industry: industry,
                searchTerm: searchTerm
            });
            
            // 显示筛选结果提示（实际应用中可以省略）
            alert('已应用筛选条件，共找到相关专题 42 个');
        });
        
        // 分页按钮交互
        const pageBtns = document.querySelectorAll('.page-btn:not(.disabled)');
        pageBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                pageBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                // 实际应用中会加载对应页的内容
            });
        });
    </script>
</body>
</html>
    
